<template>
  <div class="nav">
    <ul class="nav-list">
        <router-link :to="item.path" v-for="item  in navList" :key="item.name" class="item">
            {{item.name}}
        </router-link>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">

  export default {
    data() {
      return {
        navList: [
          {name: '推荐',path:"/Recommend"},
          {name: '歌手',path:'/SingerPage'},
          {name: '排行',path:"/TopSongLists"},
          {name: '搜索',path:"/SearchSongs"},
        ],
        nowIndex: 0
      }
    }
  }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus" scoped>
  .nav
    margin 5px 0px
    .nav-list
      width: 100%
      overflow: hidden
      display flex
      justify-content space-around
      .item
        width: 20%
        display: inline-block
        text-align: center
        height: 40px
        line-height: 40px
        text-decoration none
        color white
        &.router-link-active
          background-color: #ffffff
          color skyblue 
          border-radius 20px
          font-weight 700
</style>
